<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      /* 1.::before 创建一个伪元素，将成为匹配选中的元素的第一个元素 */
      a::before {
        /* 必须设置 content 属性表示其中的内容 */
        content: "※☆";
      }

      /* 2.::after 创建一个伪元素，成为匹配选中的元素的最后一个子元素 */
      span::after {
        content: "△❥(^_-)";
      }

      /* 3.::selection 选择器匹配被用户选取的选取是部分
      只能向 ::selection 选择器应用少量 CSS 属性：
      color、background、cursor 以及 outline
      */
      .box::selection {
        color: pink;
        background-color: black;
      }

      /* 4.::first-letter 会选中某元素中第一行的第一个字母 */
      .box1::first-letter {
        font-size: 30px;
        color: skyblue;
      }

      /* 5.::first-line 会选中某元素中第一行的全部文字 */
      .box2::first-line {
        font-size: 20px;
        color: salmon;
        text-decoration: underline;
      }
    </style>
  </head>
  <body>
    <h2>::before 创建一个伪元素，将成为匹配选中的元素的第一个元素</h2>

    <a href="#">艾编程</a>

    <h2>::after 创建一个伪元素，成为匹配选中的元素的最后一个子元素</h2>

    <span>艾编程</span>

    <h2>::selection 选择器匹配被用户选取的选取是部分</h2>
    <div class="box">arry老师是全宇宙最帅气的男神</div>

    <h2>::first-letter 会选中某元素中第一行的第一个字母</h2>

    <div class="box1">艾编程连 - 为每个互联网人提供高质量的终身学习平台</div>

    <h2>::first-line 会选中某元素中第一行的全部文字</h2>

    <div class="box2">
      艾编程连 - 为每个互联网人提供高质量的终身学习平台艾编程连 -
      为每个互联网人提供高质量的终身学习平台艾编程连 -
      为每个互联网人提供高质量的终身学习平台艾编程连 -
      为每个互联网人提供高质量的终身学习平台艾编程连 -
      为每个互联网人提供高质量的终身学习平台艾编程连 -
      为每个互联网人提供高质量的终身学习平台艾编程连 -
      为每个互联网人提供高质量的终身学习平台艾编程连 -
      为每个互联网人提供高质量的终身学习平台艾编程连 -
      为每个互联网人提供高质量的终身学习平台艾编程连 -
      为每个互联网人提供高质量的终身学习平台
    </div>
  </body>
</html>
